<template>
  <!-- 项目实施 - 10质量控制 - tab1在建项目 -->
  <div class="quality-control-doing">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx" @cardClick="showModal('card1')" ></card-list>
      </el-col>
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="通知日期">
                <el-date-picker
                  v-model="formData.date"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="整改完成">
                <el-select v-model="formData.sel2" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="是" value="0"></el-option>
                  <el-option label="否" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="责任人">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 24 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="12" style="display: inline-flex;width: 100%;">
          <el-col :span="4" :md="5" class="border-r">
            <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
            <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </el-col>
          <el-col :span="20" :md="19">
            <div class="table-top-btns">
              <el-button type="primary" plain @click="showModal('zgtzModal')"> 整改通知 </el-button>
              <el-button type="primary" plain @click="showModal('jctbModal')"> 奖惩通报 </el-button>
            </div>
            <cust-act-table
              ref="custActTable"
              tableType="qualityControlDoing"
              :list="tableData"
              :colConfigs="customColumns"
              @changePage="changePage"
              @getDetail="showModal('zgfkModal')"
              @getSelectedRow="showModal('table')"
              :pageNum="page.pageNum"
              :pageSize="page.pageSize"
              :total="page.total"
              :showIdx="false"
              :showAct="true"
              rKey="index"
            ></cust-act-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 点击卡片弹窗 -->
    <el-dialog :title="cardTitle1" class="card-modal" :visible.sync="cardState1" @close="closeModal('card1')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <div class="plan-change-btns">
        <el-dropdown trigger="click" style="margin-right:10px;">
          <el-button type="primary" plain>
            全部数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部数据</el-dropdown-item>
            <el-dropdown-item>
              <span @click="shortcutFilter(true)">
                <i class="el-icon-plus" style="color: #11A983;"></i>添加快捷筛选
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="shortcutFilter(true)" icon="el-icon-files" type="primary" plain> 筛选 </el-button>
        <el-button @click="$message.info('转发')" type="primary" plain> 转发 </el-button>
        <el-button @click="$message.info('导出')" type="primary" plain> 导出 </el-button>
        <el-button @click="$message.info('打印')" type="primary" plain> 打印 </el-button>
        <el-button @click="$message.info('致信交流')" type="primary" plain> 致信交流 </el-button>
        <i class="el-icon-question" @click="helpState = true" title="帮助"></i>
      </div>
      <cust-act-table
        ref="card1"
        tableType="qualityControl"
        :list="cardData"
        :colConfigs="cardCol"
        @changePage="changeCardPage1"
        @boxClick="boxClick"
        :pageNum="cardPage1.pageNum"
        :pageSize="cardPage1.pageSize"
        :total="cardPage1.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 点击卡片二级弹窗 -->
    <el-dialog :title="cardTitle2" class="card-modal" :visible.sync="cardState2" @close="closeModal('card2')" width="800px" :close-on-click-modal="false">
      <cust-act-table
        ref="card2"
        tableType=""
        tableHeight="60vh"
        :list="cardData2"
        :colConfigs="cardCol2"
        @changePage="changeCardPage2"
        @getSelectedRow="showModal('card3')"
        :pageNum="cardPage2.pageNum"
        :pageSize="cardPage2.pageSize"
        :total="cardPage2.total"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 添加快捷筛选 -->
    <el-dialog class="shortcut-modal" :visible.sync="shortcutState" @close="shortcutFilter(false)" :width="shortType==0? '800px': '1000px'" show-close :close-on-click-modal="false">
      <div slot="title" class="shortcut-modal-title">
        <span>设置筛选条件</span>
        <div>
          <el-button type="text"> 重置 </el-button>
          <el-button type="text"> 清空 </el-button>
        </div>
      </div>
      <div class="shortcut-modal-body">
        <div class="select-type">
          <span>筛选模式</span>
          <el-radio-group v-model="shortType">
            <el-radio :label="0">普通筛选</el-radio>
            <el-radio :label="1">高级筛选</el-radio>
          </el-radio-group>
        </div>
        <el-form v-if="shortType == 0" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item1" :key="'item1.' + idx" :label="i.title" :prop="'item1.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 220px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" clearable placeholder="请输入" style="width: 250px;margin-left:10px;"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index1 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="shortType == 1" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item2" :key="'item2.' + idx" :label="i.title" :prop="'item2.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 100px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 180px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel3" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" disabled style="width: 180px;margin-left:10px;"></el-input>
            <el-select v-model="i.sel4" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel5" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index2 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="shortcut-modal-footer">
        <div>
          <el-button type="text" @click="saveShortcut"> 另存为 </el-button>
          <el-button type="text" @click="saveShortcut"> 保存 </el-button>
        </div>
        <div>
          <el-button type="primary" plain @click="shortcutFilter(false)"> 取消 </el-button>
          <el-button type="primary" @click="shortcutFilter(false)"> 筛选 </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 帮助弹窗 -->
    <el-dialog title="帮助" class="help-modal" :visible.sync="helpState" @close="helpState=false" width="600px" show-close :close-on-click-modal="false">
      <div>
        <h4>【快捷筛选】</h4>
        <ul>
          <li v-for="(i, idx) in helpText" :key="idx">
            <h4>{{ i.title }}</h4>
            <h5>{{ i.subTitle }}</h5>
            <p>{{ i.text }}</p>
          </li>
        </ul>
      </div>
      <span slot="footer" class="help-modal-footer">
        <el-button type="primary" @click="helpState=false"> 关闭 </el-button>
      </span>
    </el-dialog>
    <!-- 整改通知 -->
    <el-dialog title="整改通知" class="btn-modal" :visible.sync="zgtzModalState" @close="closeModal('zgtzModal')" width="1200px" style="margin-top:4vh;" :close-on-click-modal="false">
      <detailModal :tabList="zgtzDetailModalInfo.tabList" :modalImgs="zgtzDetailModalInfo.imgs" 
      :formDetailTitle="zgtzDetailModalInfo.formDetailTitle" :formDetail="zgtzDetailModalInfo.formList" :formData="zgtzDetailModalInfo.doc" :rTabData="zgtzDetailModalInfo.rTabData" menuType="质量控制-整改通知"></detailModal>
    </el-dialog>
    <!-- 奖惩通报 -->
    <el-dialog title="奖惩通报" class="btn-modal" :visible.sync="jctbModalState" @close="closeModal('jctbModal')" width="1200px" style="margin-top:4vh;" :close-on-click-modal="false">
      <detailModal :tabList="jctbDetailModalInfo.tabList" :modalImgs="jctbDetailModalInfo.imgs" 
      :formDetailTitle="jctbDetailModalInfo.formDetailTitle" :formDetail="jctbDetailModalInfo.formList" :formData="jctbDetailModalInfo.doc" :rTabData="jctbDetailModalInfo.rTabData" menuType="质量控制-奖惩通报"></detailModal>
    </el-dialog>
    <!-- 整改反馈 -->
    <el-dialog title="整改反馈" class="btn-modal" :visible.sync="zgfkModalState" @close="closeModal('zgfkModal')" width="1200px" style="margin-top:4vh;" :close-on-click-modal="false">
      <detailModal :tabList="zgfkDetailModalInfo.tabList" :modalImgs="zgfkDetailModalInfo.imgs" 
      :formDetailTitle="zgfkDetailModalInfo.formDetailTitle" :formDetail="zgfkDetailModalInfo.formList" :formData="zgfkDetailModalInfo.doc" :rTabData="zgfkDetailModalInfo.rTabData" menuType="质量控制-整改反馈"></detailModal>
    </el-dialog>
    <el-dialog :title="modalType == 'card3' ? '穿透显示详情' : '查看'" class="table-modal" :visible.sync="modalState" @close="closeModal('table')" width="800px" :close-on-click-modal="false">
      <modalBtns modalType="table" @close="closeModal('table')"></modalBtns>
      <formName text="整改清单"></formName>
      <div class="form-content">
        <formPart listTitle="通知信息" ref="info1" modalTitle="TAB" :formList="formInfo.info1"></formPart>
        <formPart listTitle="整改结果" ref="info2" modalTitle="TAB" :formList="formInfo.info2"></formPart>
        <formPart listTitle="整改审核" ref="info3" modalTitle="TAB" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData10, customColumns10, menu10_cardTableData, menu10_cardTableCol, helpText, menu10_custCardDetailTableData, menu10_custCardDetailTableCol } from '../../js/staticData';
import cardList from '../../components/cardList';
import detailModal from '../../components/detailModal';
import custActTable from "../../components/custActTable.vue";
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
export default {
  name: "qualityControlDoing",
  components: {cardList, custActTable, detailModal, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon4.png'),
          line4: '整改完成',
          line3: '1'
        },
        {
          img3: require('../../images/card-icon5.png'),
          line4: '待整改',
          line3: '22'
        },
        {
          img3: require('../../images/card-icon1.png'),
          line4: '超期未完成',
          line3: '22'
        }
      ],
      cardIdx: 0,
      contentIdx: 0,
      formData: {
        ipt1: '',
        ipt2: '',
        date: '',
        sel: [],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      treeSearch: '',
      showSearch: true,
      treeData: [
        {
          label: '整改完成',
          children: [
            { label: '是', id: 0},
            { label: '否', id: 1}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: tableData10[0],
      customColumns: customColumns10,
      cardData: menu10_cardTableData,
      cardCol: menu10_cardTableCol,
      cardData2: menu10_custCardDetailTableData,
      cardCol2: menu10_custCardDetailTableCol,
      cardTitle1: `在建项目整改统计-负责项目`,
      cardTitle2: '',
      cardState1: false, // 点击卡片弹窗
      cardState2: false, // 点击卡片内部列表行弹窗
      cardTableNextLevelState: false, // 点击卡片内部二级列表行弹窗
      helpState: false,
      helpText: helpText,
      shortcutState: false,
      shortType: 0,
      shortForm: {
        item1: [
          {
            sel1: '',
            sel2: '',
            ipt1: '',
          }
        ],
        item2: [
          {
            sel1: '',
            sel2: '',
            sel3: '',
            sel4: '',
            sel5: '',
            ipt1: '',
          }
        ]
      },
      index1: 0,
      index2: 0,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardPage1: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardPage2: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalType: '',
      modalTitle: '',
      modalState: false,
      zgtzModalState: false,
      jctbModalState: false,
      zgfkModalState: false,
      zgtzDetailModalInfo: {
        formDetailTitle: '整改通知',
        formList: [
          {
            title: '',
            modalTitle: 'TAB',
            list: [
              { l: '经办人', v: '朱冠', type:'input', span: 6 },
              { l: '经办日期', v: '2024-08-01', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX集团有限公司', span: 24 }
            ]
          },
          {
            title: '通知信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: '', span: 6 },
              { l: '项目部门', v: '', span: 6 },
              { l: '整改原因', v: '', type: 'input', span: 12 },
              { l: '整改要求', v: '', type: 'input', span: 12 },
              { l: '整改负责人', v: '苑珙', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '13px', height: '14px'}, span: 6 },
              { l: '整改日期', v: '', type: 'datePicker', span: 6 },
              { l: '相关附件', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 12 }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "整改通知",
          img1: require('../../images/zlkz-zgtz-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/zlkz-zgtz-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '1分',
            dateTime: '2024-08-09 16:28:04',
            status: 'finished',
            list: [{
              name: '整改责任人',
              role: '协同',
              opinion: '已阅',
              handler: '朱冠',
              handleTime: '2024-08-09 16:28:04',
              investTime: '1分'
            }]
          }] // 流程预测
        },
        doc: {
          name: `整改通知-{项目名称}-{经办日期}`,
          flow: `整改责任人(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '项目名称字段为空', state: 1, v: '不通过'},
              {l: '整改原因字段为空', state: 1, v: '不通过'},
              {l: '整改要求字段为空', state: 1, v: '不通过'},
              {l: '整改期限字段为空', state: 1, v: '不通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '1分',
              dateTime: '2024-08-09 16:28:04',
              status: 'finished',
              list: [{
                name: '整改责任人',
                role: '协同',
                opinion: '已阅',
                handler: '朱冠',
                handleTime: '2024-08-09 16:28:04',
                investTime: '1分'
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `整改通知-蚂蚁森林-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `整改通知-蚂蚁森林-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `整改通知-蚂蚁森林-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `整改通知-蚂蚁森林-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      jctbDetailModalInfo: {
        formDetailTitle: '奖惩通报',
        formList: [
          {
            title: '',
            modalTitle: 'TAB',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-08-01', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '奖惩类型', v: '', type: 'radioGroup', list: [{l:'奖励', v:'0', checked: false, disabled: false},{l:'惩罚', v:'1', checked: true, disabled: false}], span: 6 },
              { l: '奖励金额', v: '', type: 'unitInput', unit: '元', span: 6 },
              { l: '奖励对象', v: '', type: 'input', span: 12 },
              { l: '相关附件', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '奖励说明', v: '', type:  'input'}
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "奖惩通报",
          img1: require('../../images/jctb-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/jctb-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '1',
            num2: '',
            dateTime: '',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '协同',
              handler: '凌焘',
            }]
          }], // 流程预测
        },
        doc: {
          name: `奖惩通报-{项目名称}-{经办日期}`,
          flow: `凌焘(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '项目名称字段为空', state: 1, v: '不通过'},
              {l: '奖惩说明字段为空', state: 1, v: '不通过'},
              {l: '奖惩对象字段为空', state: 1, v: '不通过'},
              {l: '奖惩类型字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '1',
              num2: '',
              dateTime: '',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '协同',
                handler: '凌焘',
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `奖惩通报-蓝旗机器人-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      zgfkDetailModalInfo:{
        formDetailTitle: '整改反馈',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-08-01', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX集团有限公司', span: 24 }
            ]
          },
          {
            title: '通知信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '蓝旗机器人造林系统升级', span: 12 },
              { l: '项目编号', v: 'XTKF202202001', span: 6 },
              { l: '负责人', v: '朱冠', span: 6 },
              { l: '整改原因', v: '打开采购订单功能报错，影响采购部门办理业务。', span: 12 },
              { l: '整改要求', v: '29日前联系开发分析报错原因并解决问题，保障客户正常使用。', span: 12 },
              { l: '整改责任人', v: '朱冠', span: 6 },
              { l: '整改期限', v: '2024-08-10', span: 6 },
              { l: '相关附件', v: '', span: 6 },
            ]
          },
          {
            title: '整改结果',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '整改说明', v: '', type: 'input', span: 24 },
              { l: '相关附件', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 24 }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "整改反馈",
          img1: require('../../images/zgfk-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/zgfk-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '1分',
            dateTime: '2024-08-08 09:17:05',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '协同',
              handler: '凌焘',
            }]
          }], // 流程预测
        },
        doc: {
          name: `整改反馈-{项目名称}-{经办日期}`,
          flow: `凌焘(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '整改说明字段为空', state: 1, v: '不通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '1分',
              dateTime: '2024-08-08 09:17:05',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '协同',
                handler: '凌焘',
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `整改反馈-蓝旗机器人-2024-07-15`,
                img: require('../../images/icon-doc.png')
              },
              {
                text: `整改反馈-白旗机器人-2024-07-15`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      formInfo: {
        info1: [
          { l: '项目名称', v: '蓝旗机器人造林系统升级', span: 12 },
          { l: '项目部门', v: '信息部门', span: 6 },
          { l: '通知日期', v: '2024-08-01', span: 6 },
          { l: '整改负责人', v: '朱冠', span: 6 },
          { l: '整改期限', v: '2024-08-10', span: 6 },
          { l: '相关附件', v: '', span: 12 },
          { l: '整改原因', v: '打开采购订单功能报错，影响采购部门办理业务。', span: 12 },
          { l: '整改要求', v: '22日前联系开发分析报错原因并解决问题，保障客户正常使用。', span: 12 }
        ],
        info2: [
          { l: '整改说明', v: '已联系总部开发人员远程分析并解决问题，目前客户使用正常。', span: 24 },
          { l: '相关附件', v: '', span: 24 }
        ],
        info3: [
          { l: '审核人', v: '苑珙', span: 6 },
          { l: '整改完成', v: '否', type: 'radioGroup', list: [{l:'是', v:'0', checked: false, disabled: true},{l:'否', v:'1', checked: true, disabled: true}], span: 6 },
          { l: '完成日期', v: '2024-08-10', span: 6 },
        ]
      }
    };
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){},
    cardIdx(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData10[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        if(this.cardData && this.cardData.length){
          this.cardPage1.total = this.cardData.length;
          this.cardTitle1 = `在建项目整改统计-负责项目 (${this.cardPage1.total})条`;
        } else {
          this.cardPage1.total = 0;
          this.cardTitle1 = `在建项目整改统计-负责项目`;
        }
      }, 1500)
      this.customColumns = customColumns10;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      if(type == 'card1') {
        this.cardState1 = true;
      } else if(type == 'card2') {
        this.cardState2 = true;
      } else if(type == 'card3') {
        this.modalState = true;
      } else if(type == 'zgtzModal') {
        this.modalState = false;
        this.zgtzModalState = true;
      } else if(type == 'jctbModal') {
        this.modalState = false;
        this.jctbModalState = true;
      } else if(type == 'zgfkModal') {
        this.modalState = false;
        this.zgfkModalState = true;
      } else {
        this.modalState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'card1') {
        this.cardState1 = false;
      } else if(type == 'card2') {
        this.cardState2 = false;
      } else if(type == 'card3') {
        this.modalState = false;
      } else if(type == 'zgtzModal') {
        this.zgtzModalState = false;
      } else if(type == 'jctbModal') {
        this.jctbModalState = false;
      } else if(type == 'zgfkModal') {
        this.zgfkModalState = false;
      } else {
        this.modalState = false;
      }
    },
    /**
     * @author Wrl
     * 新增筛选条件
     */
    handleAdd(e) {
      if(this.shortType == 0) {
        this.index1++;
        this.shortForm.item1.push({
          sel1: '',
          sel2: '',
          ipt1: '',
        });
      } else if(this.shortType == 1) {
        this.index2++;
        this.shortForm.item2.push({
          sel1: '',
          sel2: '',
          sel3: '',
          sel4: '',
          sel5: '',
          ipt1: '',
        });
      }
    },
    /**
     * @author Wrl
     * 删除筛选条件
     */
    handleRemove(e) {
      if(this.shortType == 0) {
        if(this.index1 != 0) {
          this.shortForm.item1.splice(this.index1, 1);
          this.index1--
        }
      } else if(this.shortType == 1) {
        if(this.index2 != 0) {
          this.shortForm.item2.splice(this.index2, 1);
          this.index2--
        }
      }
    },
    /**
     * @author Wrl
     * 设置筛选条件 - 保存
     */
    saveShortcut() {
      this.$message.success('保存成功！');
      this.shortcutState = false;
    },
    /**
     * @author Wrl
     * 设置筛选条件弹窗
     */
    shortcutFilter(e) {
      this.shortcutState = e;
      if(e == false) {
        this.shortType = 0;
        this.shortForm = {
          item1: [
            {
              sel1: '',
              sel2: '',
              ipt1: '',
            }
          ],
          item2: [
            {
              sel1: '',
              sel2: '',
              sel3: '',
              sel4: '',
              sel5: '',
              ipt1: '',
            }
          ]
        }
      }
    },
    /**
     * @author Wrl
     * 点击卡片弹窗列表行 - 二级弹窗
     */
    boxClick(obj) {
      this.cardData2 = [];
      this.$nextTick(() => {
        this.cardTitle2 = `${obj.a}${obj.b}(计数):${obj.c}`;
        let arr = [];
        for(let i=0; i<obj.c; i++) {
          let temp = {
            xmmc: obj.a,
            state: `test${i+1}打开采购订单功能报错，影响采购部门办理业务。`
          }
          arr.push(temp);
        }
        this.cardCol2[1].label = obj.b;
        this.cardData2 = arr;
        this.showModal('card2')
      })
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns10;
      this.tableData = tableData10[this.contentIdx];
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片列表分页信息
     */
    changeCardPage1(page) {
			this.cardPage1.pageNum = page.pageNum; // 当前页
			this.cardPage1.pageSize = page.pageSize; // 每页条数
			this.cardPage1.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片二级列表分页信息
     */
    changeCardPage2(page) {
			this.cardPage2.pageNum = page.pageNum; // 当前页
			this.cardPage2.pageSize = page.pageSize; // 每页条数
			this.cardPage2.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .quality-control-doing {
    .card-group,
    .table-top-btns {
      margin-bottom: 16px;
    }
    .card-modal {
      overflow: hidden;
      max-height: 750px;
      .el-dialog__body {
        padding: 10px 20px;
      }
      .plan-change-btns {
        position: absolute;
        top: 10px;
        right: 50px;
        width: 900px;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        .el-icon-question {
          color:#11A983;
          margin-left:10px;
          cursor: pointer;
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .cust-modal .cust-modal-bgi {
        margin-top: 20px;
      }
      .el-dialog__headerbtn {
        z-index: 100;
      }
      .table-modal {
        .el-dialog__header {
          padding: 20px 20px 0;
        }
        .el-dialog__body {
          padding: 0 20px;
          background: #ffffff;
        }
      }
      .btn-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 5px;
          background: #eeeeee;
        }
        .el-card__body {
          padding-bottom: 0;
        }
      }
      .help-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
          div {
            height: 75vh;
            overflow-y: scroll;
            padding-bottom: 20px;
            box-sizing: content-box;
            ul {
              padding: 0;
              li {
                list-style: none;
                h4 {
                  margin: 20px 0 5px;
                }
                h5 {
                  color:#333333;
                  font-weight: bold;
                  font-family: Arial, "微软雅黑", "Helvetica Neue", "Microsoft Yahei", 宋体, Helvetica, STheiti, Tahoma, sans-serif, serif;
                  font-size: 14px;
                  margin: 5px auto;
                  text-indent: 1.5em;
                }
                p {
                  margin-top: 0;
                  text-indent: 2em;
                }
              }
            }
            &::-webkit-scrollbar {
              width: 0;
            }
          }
        }
      }
      .shortcut-modal {
        .el-dialog__header {
          padding: 10px 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
        }
        .shortcut-modal-title {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 95%;
        }
        .shortcut-modal-body {
          .select-type {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            .el-radio-group {
              margin-left: 10px;
            }
          }
          .cust-btn {
            padding: 2px 3px;
            font-size: 10px;
          }
        }
        .shortcut-modal-footer {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
      }
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>